<template>

  <el-col :sm="12" :lg="8"  >
    <el-card shadow="always" style="margin: 5px; text-align: center;width: auto" >

      <el-button type="primary" style="width: 50px; height: 50px; border-radius:50%;"><el-icon  size="large"><OfficeBuilding /></el-icon></el-button>
<p><label style="font-size:large">{{ companyMember }}</label></p>
        <label style="font-size:small">企业数量</label>
    </el-card>

  </el-col>

  <el-col :sm="12" :lg="8">
    <el-card shadow="always" style="margin: 5px; text-align: center;width: auto">

      <el-button type="success" style="width: 50px; height: 50px; border-radius:50%;"><el-icon  size="large"><User /></el-icon></el-button>

      <p>   <label  style="font-size:large">{{ companyUserMember }}</label> </p>
      <label style="font-size:small">员工数量</label>
    </el-card>
  </el-col>
  <el-col :sm="12" :lg="8">
    <el-card shadow="always" style="margin: 5px; text-align: center;width: auto">
      <el-button type="warning" style="width: 50px; height: 50px; border-radius:50%;"><el-icon  size="large"><MilkTea /></el-icon></el-button>
      <p>   <label style="font-size:large">{{ employeeMember }}</label></p>
   <label style="font-size:small">雇员数量</label>
    </el-card>
  </el-col>


</template>

<script lang="ts" setup>
import {onMounted, ref} from "vue";
import {getCCUECountApi,} from "../../api/MyIndex";

onMounted(() => {
  getData()
})
const employeeMember=ref('')
const companyUserMember=ref('')
const companyMember=ref('')
function getData() {
  getCCUECountApi().then(response => {
    if (response.code==200){
      companyUserMember.value=response.data.companyUserMember;
      companyMember.value=response.data.companyMember;
      employeeMember.value=response.data.employeeMember;
    }
  })


}

</script>

<style scoped>

</style>